<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				height: 600px;
				background: url(img/images/bg.jpg) no-repeat;
				background-size:100% 100% ;
				margin: 20px auto;
				overflow: hidden;
				position: relative;
				cursor: pointer;
			}
			#caoping{
				width: 800px;
				position: absolute;
				bottom: 55px;
			}
			.cao{
				width: 400px;
				float: left;
			}
			#nav img{
				position: absolute;
				left: 240px;
				top: 100px;
			}
			#flash{
				position: absolute;
				left: 150px;
				top: 180px;
				position: absolute;
			}
			#dongBird{
				position: absolute;
				top: 20px;
				right: 0;
			}
			#start{
				position: absolute;
				left: 150px;
				top: 350px;
			}
			#start img{
				cursor: pointer;
			}
			#startBird{
				position: absolute;
				left: 100px;
				top: 270px;
				display: none;
				z-index: 1;
			}
			#list{
				list-style: none;
				position: absolute;
				left: 500px;
			}
			#fenshu{
				z-index: 10;
			}
			#ok{
				position: absolute;
				left:-200px;
				top: 380px;
				z-index: 1;
			}
			#score{
				position: absolute;
				left: 120px;
				top: 700px;
				z-index: 1;
			}
			#wangame{
				position: absolute;
				left: 150px;
				top: -180px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="caoping">
				<img src="img/images/slider.jpg" class="cao"/>
				<img src="img/images/slider.jpg" class="cao"/>
			</div>
			<div id="nav">
				<img src="img/images/0.jpg" id="fenshu"/>
			</div>
			<div id="flash">
				<img src="img/images/head.jpg"/>
				<img src="img/images/bird0.png" id="dongBird"/>
			</div>
			<div id="start">
				<img src="img/images/start.jpg" id="kaishi"/>
				<img src="img/images/submit.jpg" style="margin-left: 50px;"/>
			</div>
			<img src="img/images/bird0.png" id="startBird"/>
			<img src="img/images/game_over.jpg" id="wangame"/>
			<img src="img/images/message.jpg" id="score"/>
			<img src="img/images/ok.jpg" id="ok"/>
			<ul id="list">
				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var caoping = document.getElementById("caoping");
		var flash = document.getElementById("flash");
		var dongBird = document.getElementById("dongBird");
		var start = document.getElementById("start");
		var kaishi = document.getElementById("kaishi");
		var startBird = document.getElementById("startBird");
		var caoMove = 0;
		var list = document.getElementById("list");
		var score = document.getElementById("score");
		var wangame = document.getElementById("wangame");
		var ok = document.getElementById("ok");
		var chiBang = 0;
		//点击开始
		kaishi.onclick = function(){
			flash.style.display = "none";
			start.style.display = "none";
			niaoDong();
			start.index = setInterval(function(){
				var fangFang = creatFang();
				start.haha = setInterval(function(){
					var fangLeft = fangFang.offsetLeft;
					fangLeft -=1;
					if(fangLeft <= -560){
						list.removeChild(fangFang);
						clearInterval(this.haha);
					}
					fangFang.style.left = fangLeft + "px";
				},6)
			},3000)
		}
		var j = 0;
		var zi = 0;
		setInterval(function(){
			j++;
			zi = j % 2;
		},200)
		//小鸟翅膀在动
		setInterval(function(){
			chiBang++;
			var shuzi = chiBang % 2;
			dongBird.src = "img/images/bird" + shuzi + ".png";
		},200)
		//出现鸟。点击能跳
		var timer;
		var i = 0;
		function niaoDong(){
			startBird.style.display = "block";
			box.onmousedown = function(){
				clearInterval(startBird.index);
				startBird.index = setInterval(function(){
					startBird.src = "img/images/up_bird" + zi + ".png";
					startBirdTop -= 11;
					i++;
					if(startBirdTop <= 0){
						startBirdTop = 0;
						gameOver();
					}
					if(i >= 10){
						i = 0;
						startBird.src = "img/images/down_bird" + zi + ".png";
						clearInterval(startBird.index);
					}
					startBird.style.top = startBirdTop + "px";
				},13)
			}
			wangxiaDown();
		}
		//往下掉
		var startBirdTop;
		function wangxiaDown(){
			timer = setInterval(function(){
				startBirdTop = startBird.offsetTop;
				startBirdTop += 3;
				if(startBirdTop >= 505){
					startBirdTop = 505;
				}
				startBird.style.top = startBirdTop + "px";
			},6)
		}
		//小鸟和英文字母在上下滑动
		var birdTop = flash.offsetTop;
		var add = -1;
		setInterval(function(){
			birdTop += add;
			if(birdTop <= 150){
				add = -add;
			}else if(birdTop >= 210){
				add = -add;
			}
			flash.style.top = birdTop + "px";
		},20)
		//下面草坪在无限往左滚动
		setInterval(function(){
			caoMove -= 1;
			if(caoMove <= -250){
				caoMove = 0;
			}
			caoping.style.left = caoMove + "px";
		},6)
		//随机数设定中间空白高
		function suiJiCenterGao(){
			//中间的空白
			var center = parseInt(Math.random()*31+150);
			return center;
		}
		//随机设定上面的高
		function suiJiTopGao(){
			var top = parseInt(Math.random()*231)
			return top;
		}
		//增加方块
		function creatFang(){
			var top = suiJiTopGao();
			var center = suiJiCenterGao();
			var bottom = 530-top-center-120;
			var fangkuai = document.createElement("li");
			fangkuai.style.position = "relative";
			var fangOne = document.createElement("img");
			fangOne.src = "img/images/up_pipe.png";
			fangOne.style.position = "absolute";
			fangOne.style.top = top + "px";
			var fangThree = document.createElement("img");
			fangThree.src = "img/images/up_mod.png";
			fangThree.style.position = "absolute";
			fangThree.style.top = 0;
			fangThree.style.height = top + "px";
			fangThree.style.width = "62px";
			var fangTwo = document.createElement("img");
			fangTwo.src = "img/images/down_pipe.png";
			fangTwo.style.position = "absolute";
			fangTwo.style.bottom = -530 + bottom+ "px";
			var fangFour = document.createElement("img");
			fangFour.src = "img/images/down_mod.png";
			fangFour.style.position = "absolute";
			fangFour.style.bottom = "-530px";
			fangFour.style.height =  bottom + "px";
			fangFour.style.width = "62px";
			list.appendChild(fangkuai);
			fangkuai.appendChild(fangOne);
			fangkuai.appendChild(fangTwo);
			fangkuai.appendChild(fangThree);
			fangkuai.appendChild(fangFour);
			return fangkuai;
		}
		function gameOver(){
			box.onmousedown = null;
			var timer = setInterval(function(){
				startBirdTop +=1;
				if(startBirdTop >= 505){
					startBirdTop = 505;
					clearInterval(timer);
				}
				startBird.style.top = startBirdTop + "px";
			},1)
			var haha = setInterval(function(){
				var wanGame = wangame.offsetTop;
				wanGame += 5;
				if(wanGame >= 180){
					wanGame = 180;
					clearInterval(haha);
				}
				wangame.style.top = wanGame + "px";
			},20)
			var heihie = setInterval(function(){
				var okOne = ok.offsetLeft;
				okOne += 5;
				if(okOne >= 200){
					okOne = 200;
					clearInterval(heihei);
				}
				ok.style.left = okOne + "px";
			},20)
			var hehe = setInterval(function(){
				var scoreTop = score.offsetTop;
				scoreTop -= 5;
				if(scoreTop <= 230){
					scoreTop = 230;
					clearInterval(hehe);
				}
				score.style.top = scoreTop + "px";
			},20)
		}
	</script>
</html>
